import 'package:flutter/material.dart';
import 'package:flutter_project/common/route_page/route_name.dart';
import 'package:flutter_project/config/app_bar_view.dart';
import 'package:flutter_project/config/theme_color.dart';

import 'account_details_page.dart';

class WithdrawalMainPage extends StatefulWidget {
  const WithdrawalMainPage({super.key});

  @override
  State<WithdrawalMainPage> createState() => _WithdrawalMainPageState();
}

class _WithdrawalMainPageState extends State<WithdrawalMainPage> {
  List<int> moneyList = [1, 10, 15, 20];

  @override
  Widget build(BuildContext context) {
    return CommonAppWidget.navAppBar(
        title: '提现',
        childWidget: ListView(
          children: [
            Container(
              height: 150,
              padding: const EdgeInsets.only(top: 10, left: 10, right: 10),
              decoration: const BoxDecoration(
                  gradient: LinearGradient(colors: [
                Color.fromRGBO(253, 244, 242, 1.0),
                Color.fromRGBO(254, 248, 247, 1.0),
                Colors.white
              ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '金币数量（10000金币≈1元）',
                        style: TextStyle(
                            color: ThemeColor.textColorSecond, fontSize: 13),
                      ),
                      ElevatedButton(
                        style: const ButtonStyle(
                          backgroundColor:
                              MaterialStatePropertyAll(Colors.white),
                          minimumSize: MaterialStatePropertyAll(
                            Size(50, 20),
                          ),
                          padding: MaterialStatePropertyAll(
                            EdgeInsets.symmetric(horizontal: 5, vertical: 2),
                          ),
                        ),
                        onPressed: () {
                          RouteNames.push(const AccountDetailsPage());
                        },
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            Text(
                              '账户明细',
                              style: TextStyle(
                                  color: ThemeColor.textColorSecond,
                                  fontSize: 13),
                            ),
                            Icon(
                              Icons.arrow_right,
                              color: ThemeColor.textColorSecond,
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                  RichText(
                    text: const TextSpan(
                        text: '30',
                        style: TextStyle(
                            fontSize: 24,
                            fontWeight: FontWeight.w500,
                            color: Colors.black),
                        children: [
                          TextSpan(
                              text: '≈0.00元', style: TextStyle(fontSize: 14))
                        ]),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Container(
                              decoration: const BoxDecoration(
                                shape: BoxShape.circle,
                                color: Colors.green,
                              ),
                              padding: const EdgeInsets.all(5),
                              child: const Icon(
                                Icons.wechat,
                                color: Colors.white,
                              )),
                          const SizedBox(
                            width: 10,
                          ),
                          Text(
                            '提现至微信零钱',
                            style: TextStyle(
                                color: ThemeColor.textColor,
                                fontWeight: FontWeight.w500),
                          ),
                        ],
                      ),
                      ElevatedButton(
                          style: ButtonStyle(
                            minimumSize:
                                MaterialStateProperty.all(const Size(40, 25)),
                            padding: MaterialStateProperty.all(
                                const EdgeInsets.symmetric(
                                    vertical: 5, horizontal: 14)),
                            backgroundColor:
                                MaterialStateProperty.all(ThemeColor.orangeColor),
                          ),
                          onPressed: () {},
                          child: const Text(
                            '去绑定',
                            style: TextStyle(color: Colors.white),
                          ))
                    ],
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.white,
              padding: const EdgeInsets.only(left: 12, right: 10),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(
                    height: 15,
                  ),
                  const Text(
                    '提现金额',
                    style: TextStyle(fontWeight: FontWeight.w500),
                  ),
                  const SizedBox(
                    height: 10,
                  ),
                  GridView.builder(
                      shrinkWrap: true,
                      itemCount: 4,
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        mainAxisSpacing: 10,
                        crossAxisSpacing: 10,
                        childAspectRatio: 24 / 11,
                      ),
                      itemBuilder: (BuildContext context, int index) {
                        int money = moneyList[index];
                        return Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(8),
                            color: ThemeColor.sendMsgColor,
                          ),
                          child: Text(
                            '$money元',
                            style: const TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 18,
                              color: Color.fromRGBO(106, 67, 32, 1.0),
                            ),
                          ),
                        );
                      }),
                  const SizedBox(
                    height: 15,
                  ),
                  const Text(
                    '温馨提示',
                    style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                  ),
                  const SizedBox(
                    height: 15,
                  ),
                  Text(
                    '1、提现申请发起后，审核一般在1-3个工作日完成，请您耐心等待。',
                    style: TextStyle(color: ThemeColor.textColorSecond),
                  ),
                  const SizedBox(
                    height: 2,
                  ),
                  Text(
                    '2、对账户余额有疑问，可以在账户明细中查看您账户的金币明细。',
                    style: TextStyle(color: ThemeColor.textColorSecond),
                  ),
                  const SizedBox(
                    height: 2,
                  ),
                  Text(
                    '3、想查看提现申请，可以在账户明细中查看您的提现记录明细。',
                    style: TextStyle(color: ThemeColor.textColorSecond),
                  ),
                  const SizedBox(
                    height: 2,
                  ),
                  Text(
                    '4、如果对使用结果和流程有疑问，欢迎您在个人中心-意见反馈内发起反馈。',
                    style: TextStyle(color: ThemeColor.textColorSecond),
                  ),
                  const SizedBox(
                    height: 12,
                  ),
                ],
              ),
            ),
            const SizedBox(
              height: 10,
            ),
            Container(
              color: Colors.white,
              height: 100,
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const Text(
                    '≈10000金币',
                    style: TextStyle(fontSize: 14, color: Colors.black),
                  ),
                  ElevatedButton(
                      style: ButtonStyle(
                          backgroundColor:
                              MaterialStatePropertyAll(ThemeColor.orangeColor)),
                      onPressed: () {},
                      child: const Text(
                        '立即兑现',
                        style: TextStyle(color: Colors.white),
                      )),
                ],
              ),
            ),
          ],
        ));
  }
}
